import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './LabeledComponent.module.css';
import Text from '../Text';

export default function LabeledComponent({
	className,
	viewmode,
	before,
	after,
	children,
	...props
}) {
	return (
		<div className={cn(className, s.labeledComponent)}>
			{before}
			{viewmode ? (
				<Text primary {...props} />
			) : (
				React.cloneElement(children, {
					...children?.props,
					...props,
					className: cn(s.component, children?.props?.className),
				})
			)}
			{after}
		</div>
	);
}

LabeledComponent.propTypes = {
	className: PropTypes.string,
	viewmode: PropTypes.bool,
	before: PropTypes.node,
	after: PropTypes.node,
	children: PropTypes.node.isRequired,
};

LabeledComponent.defaultProps = {
	className: s.labeledComponent,
	viewmode: false,
	before: '',
	after: '',
};
